<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <!--
      视图与数据的双向绑定使用v-model
      双向绑定：数据的变化会影响视图，视图的变化也会影响数据
     -->
    <input type="text" v-model="textField">
    <p>文本框中的内容：{{textField}}</p>
    <!-- 多行文本框textarea -->
    <textarea v-model="textarea"></textarea>
    <!-- 这里使用样式whit-space:pre-line是为了正常地展示多行文本的换行效果 -->
    <p style="white-space: pre-line">多行文本框中的内容：{{textarea}}</p>
    <!-- 复选框 -->
    <input type="checkbox" v-model="checkbox"/>
    <p>复选框选中状态：{{checkbox}}</p>
    <!-- 复选框一般是一组选项 -->
    <input type="checkbox" value="足球" v-model="checkList"/>足球
    <input type="checkbox" value="篮球" v-model="checkList"/>篮球
    <input type="checkbox" value="排球" v-model="checkList"/>排球
    <p>复选框选中状态：{{checkList}}</p>
    <hr>
    <!-- 单选框 -->
    <input type="radio" value="男" v-model="sex" />男
    <input type="radio" value="女" v-model="sex" />女
    <p>单选框选中：{{sex}}</p>
    <hr>
    <!-- 下拉选项列表 -->
    <select v-model="select">
      <option>男</option>
      <option>女</option>
    </select>
    <p>下拉选项列表选中：{{select}}</p>
    <!-- 多选 -->
    <select v-model="selectList" multiple>
      <option>足球</option>
      <option>篮球</option>
      <option>排球</option>
    </select>
    <p>多选选中：{{selectList}}</p>

    <hr>
    <!--
      表单进行数据绑定时常用的修饰符
        lazy      类似于属性的懒加载,我们有时不是在输入框中数据一变就更新数据而是在输入框失去焦点时（确认输入完成后）才更新数据
        number    默认情况下，输入框中输入的文案都会被处理为字符会串类型数据，我们可以使用这个修饰符把它转为数值类型
        trim      把绑定的文本数据的首尾空格去掉
     -->
    <input v-model.lazy="lazy_textField"/>
    <p>lazy_textField:{{lazy_textField}}</p>

    <input v-model.number="number_textField"/>
    <p>number_textField:{{number_textField}}</p>

    <input v-model.trim="trim_textField"/>
    <p>trim_textField:'{{trim_textField}}'</p>

  </div>

<script>
  const {createApp, ref} = Vue
  const config = {
    setup() {

      const textField = ref('')
      const textarea = ref('')
      /* 复选框选中与否使用布尔值来表示 */
      const checkbox = ref(false)
      const checkList = ref([])
      const sex = ref('')
      const select = ref('')
      const selectList = ref([])
      const lazy_textField = ref('')
      const number_textField = ref(0)
      const trim_textField = ref('')

      return {textField, textarea,checkbox,checkList,sex,select,selectList,lazy_textField,number_textField,trim_textField}
    }
  }
  const app = createApp(config)
  app.mount('#app')
</script>
</body>
</html>